<template>
  <div>
    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      已有权限：
      <br />
      <div v-for="(item, index) in row.power_name" :key="index" class="power">
        {{ item }}
        <el-button type="danger"  @click="deleteUserPower(item, row)" plain size="mini" round>删除</el-button>
        <br />
        <br />
      </div>
      添加权限：
      <div v-for="item in rolePower" :key="item.id" class="addRolePower">
        {{ item.power_name }}
         <el-button type="success"  @click="addUserPower(item, row)" plain size="mini" round>添加</el-button>
        <br />
        <br />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 卡片 -->
    <el-card class="el-card" shadow="hover" :body-style="{ padding: '0px' }">
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <!-- 表头 -->
        <el-table-column
          prop="administrators_id"
          label="创建人Id"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="administrators_name"
          label="角色修改人"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="role_describe"
          label="角色描述"
        ></el-table-column>
        <el-table-column prop="role_id" label="角色Id"></el-table-column>
        <el-table-column label="用户权限">
          <!-- 插槽 用户权限 -->
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>权限：</p>
              <p v-for="(item, index1) in scope.row.power_name" :key="index1">
                {{ item }}
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">用户权限</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="changeUserPower(scope.$index, scope.row)"
              >修改用户权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';
import SystemManage from '../assets/css/SystemManage.css';
import util from '../lib/index.js';
export default {
  data() {
    return {
      msg: '',
      dialogVisible: false,
      radio: 3,
      list: [],
      row: {},
      rolePower: [],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //修改用户权限
    changeUserPower(index, row) {
      this.rolePower = [];
      this.dialogVisible = true;
      this.row = row;
      util.stystemChange({}).then((res)=>{
        for (let i = 0; i < JSON.parse(res.data.data).length; i++) {
          // console.log(JSON.parse(res.data.data)[i].power_name)
          if (
            this.row.power_name.indexOf(
              JSON.parse(res.data.data)[i].power_name
            ) === -1
          ) {
            console.log(JSON.parse(res.data.data)[i].power_name);
            this.rolePower.push(JSON.parse(res.data.data)[i]);
          }
        }
        // console.log(JSON.parse(res.data.data));
        // console.log('row', this.row);
            util.systemAll({}).then((res) => {
      this.list = res.data.data;
      this.manage = res.data.data.power_name;
        
      
    });
      })
    },
    //删除用户权限
    deleteUserPower(item, row) {
      // console.log('id', row.role_id);
      // console.log(this.row);
      this.$confirm('确认删除？')
        .then((_) => {
          util.stytemDel({
             role_id: row.role_id,
              powers: [
                {
                  power_name: item,
                },
              ],
          }).then((res)=>{
              util.systemAll({}).then((res) => {
      this.list = res.data.data;
      this.manage = res.data.data.power_name;
    });
          })
             this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    //添加用户权限
    addUserPower(item, row) {
      this.$confirm('确认添加？')
        .then((_) => {
          this.row.power_name.push(item.power_name);
          util
            .systemAdd({
              role_id: row.role_id,
              powers: [{ power_id: item.power_id }],
            })
            .then((res) => {
              util.systemAll({}).then((res) => {
                this.list = res.data.data;
                this.manage = res.data.data.power_name;
              });
            });
          this.dialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
  },
  computed: {},
  mounted() {
    util.systemAll({}).then((res) => {
      this.list = res.data.data;
      this.manage = res.data.data.power_name;
    });
  },
};
</script>
